<template>
  <section>
    <logo-panel :backgroundImg="logo.logoImg" logoName="专栏" logoDesc="用心记录点点滴滴"></logo-panel>
    <div class="grid_3">
      <tag :categoryData="articleCategory" class="tag-show" @tagClick="tagClick"></tag>
    </div>
    <div class="grid_9" style="min-height: 385px">
      <div class="recent-subject">
        <panel-list :listDatas="panelConfig" reverse="false" hLineWidth="450px" vLineHeight="300px" hLineLeft="-30px"
                    hLineTop="-30px" panelTitle="最近专题" @itemclick="subjectClickHandler">
          <div slot-scope="{item}">
            <div class="article-title flex flex-h flex-justify-space-between">
              <a>{{item.title}}</a>
              <a><i class="fa fa-book"></i> {{item.articleNum}}</a>
            </div>
          </div>
        </panel-list>
        <div class="all-btn"><router-link to="/subject">查看全部</router-link></div>
      </div>
    </div>
    <div class="article-show-panel grid_12">
      <div class="flex flex-h-reverse" style="border-bottom: 1px solid rgba(255,255,255,.7)">
        <div class="grid_12 flex flex-h flex-justify-space-between">
          <div class="new-article">最新文章</div>
          <div class="see-all"><router-link to="/allArticle?searchTitle=全部文章">查看全部</router-link></div>
        </div>
      </div>

      <article-show :listDatas="articleShow.datas"></article-show>
    </div>
  </section>
</template>

<script>
import axios from '../../node_modules/axios/dist/axios'
export default {
  data () {
    return {
      logo: {
        logoImg: require('./common/assets/articleBg.jpg')
      },
      panelConfig: {
        imageSrc: require('../../static/images/背景长图.png'),
        width: '700',
        datas: []
      },
      articleShow: {
        datas: []
      },
      articleCategory: []
    }
  },
  mounted () {
    // 最近专题查询
    this.loadResenctSubject()
    this.loadResenctArticle()
    this.loadCategory()
  },
  methods: {
    loadCategory () {
      let _this = this
      axios.get('/article/loadCategory').then(function (res) {
        if (res.data.status === 200) {
          _this.articleCategory = res.data.datas
        }
      })
    },
    loadResenctSubject () {
      let _this = this
      axios.get('/article/resentSubject').then(function (res) {
        if (res.data.status === 200) {
          _this.panelConfig.datas = res.data.datas
        }
      })
    },
    loadResenctArticle () {
      let _this = this
      axios.get('/article/resentArticle', {params: {operator: 'resent'}}).then(function (res) {
        if (res.data.status === 200) {
          _this.articleShow.datas = res.data.datas
        }
      })
    },
    subjectClickHandler (item) {
      this.$router.push({path: '/allArticle', query: {nodeId: item.nodeId, searchTitle: item.title}})
    },
    tagClick (item) {
      this.$router.push({path: '/categoryArticle', query: {categoryName: item.name, searchTitle: item.name}})
    }
  },
  components: {
    'LogoPanel': (resolve) => { require(['./common/LogoPanel'], resolve) },
    'Tag': (resolve) => { require(['./common/Tag'], resolve) },
    'panelList': () => import('./common/PanelList'),
    'articleShow': () => import('./common/ArticleShow')
  }
}
</script>

<style scoped>
.recent-subject {
  position: relative;
  margin-top: 35px;
 margin-bottom: 20px;
}
.all-btn {
  position: absolute;
  cursor: pointer;
  top: -30px;
  right: 15px;
}
.new-article {
  margin-left: 0px;
  font-size: 20px;
  margin-bottom: 8px;
}

.article-title a:hover {
  cursor: pointer;
}

</style>
